<%@ page language="java" import="java.util.*,SiTuQingYou.vo.*,SiTuQingYou.util.*" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
      String path = request.getContextPath();
    %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=path%>/houtai/js/jquery-3.3.1.min.js"></script>

<style type="text/css">
      #yemian{padding:50px;}
      .pager a{
       display:inline-block;
       width:35px;
       height:35px;
       background-color:gray;
       color:white;
       text-align:center;
       line-height:35px;
       border-radius:18px;
       text-decoration:none;
      }
      
      #deleteChecked{font-size:25px;}
      .pager a.cur{background-color:green;}
      .sc img{width:160px;height:160px;}
      .sc{width:1200px;height:164px;margin-top:18px;}
      .fuxuan{float:left;height:162px;width:32px;}
      .tupian{float:left;height:162px;width:162px;}
      .neirong{float:left;height:162px;width:1004px;background-color:#E0FFFF;}
      
      .zhuti{height:50px;font-size:22px;font-weight:600;padding-left:40px;color:gray;text-decoration:none;cursor:pointer;}
      .jiage{height:40px;font-size:25px;font-weight:900;padding-left:40px;color:red;}
      .tuanqi{padding-left:40px;font-size:16px;}
      .renshu{padding-left:40px;font-size:16px;}
      .addtime{padding-left:40px;font-size:16px;}
      
</style>


</head>
<body>
    <jsp:include page="header.jsp"></jsp:include>
    <!-- 全选与单选复选框的关系start -->
      <script type="text/javascript">
          //***全选复选框选中，所有复选框就选中
          $(document).ready(function(){
        	  //给checkAll添加点击事件
        	  $("#checkAll").click(function(){
        		  //$(this)就是checkAll复选框
        		  var flag = $(this).prop("checked");//判断点击之后全选复选框是否被选中
        		  //全选复选框和ck复选框的checked需保持一致
        		  $("input[id=ck]").prop("checked",flag);
        	  })
        	
          })
      </script>
      <!-- 全选与单选复选框的关系end -->
      
       <!-- 全选后 一个取消点击，全选也会取消选中；全部逐一选中后，全选会选中 ：start-->
      <script type="text/javascript">
          $(document).ready(function(){
        	  $("input[id=ck]").click(function(){
        		  var flag = $(this).prop("checked");
        		  if(flag==false)
        		  {
        			  $("#checkAll").prop("checked",false);
        		  }
        		  else
        		  {
        			  var c1 = $("input[id=ck]").length;
        			  var c2 = $("input[id=ck]:checked").length;
        			  if(c1==c2)
        			  {
        				  $("#checkAll").prop("checked",true);
        			  }
        		  }
        		  
        	  })
          }) 
      </script>
      <!-- 全选后 一个取消点击，全选也会取消选中；全部逐一选中后，全选会选中 ：end-->
      
      <!-- 删除选中start -->
      <script type="text/javascript">
           $(document).ready(function(){
        	   $("#deleteChecked").click(function(){
        		   var cks = $("input[id=ck]:checked");
        		   if(cks.length==0){return;}
        		   var cids = "";
        		   cks.each(function(){
        			   var cid = $(this).attr("cid");//获得cid属性中的内容
        			   cids = cids+"&cid="+cid;
        		   })
        		   
        		   $.ajax({
        			   url:"<%=path%>/MyShoppingcartServlet",
        			   type:"post",
        			   data:"method=deleteAllChecked"+cids,
        			   async:false,
        			   success:function(mes){
        				   cks.each(function(){
        					   $(this).parent().parent().remove();
        				   })
        				   $("#HowManyData").html(mes);//更改记录数量
   
        			   }
        			   
        		   })
        	   })
           })
           
      </script>
      <!-- 删除选中end -->
    
    

<div id="yemian">
    <jsp:include page="/MyShoppingcartServlet"><jsp:param value="lookForAllShoppingcart" name="method"/></jsp:include>
    <%
    ArrayList<PackCar> allsc = (ArrayList<PackCar>)request.getAttribute("allsc");
    Pager pager = (Pager)request.getAttribute("pager");
    %>
    <input id="checkAll" type="checkbox">当前页全选
    
    <%for(PackCar p:allsc){%>
         <div class="sc">
              <div class="fuxuan"><input id="ck" cid="<%=p.getId() %>" type="checkbox"></div>
              
              <!-- 跟团游图片 -->
              <div class="tupian">        
                   <img src="<%=path%>/packageImage/<%=p.getPackagetour().getPhoto()%>">
              </div>
              
            <div class="neirong" >  
              <!-- 跟团游主题 -->
              <div class="zhuti">
                   <a><%=p.getPackagetour().getTitle() %></a>
              </div>
         
              <!-- 价格 -->
              <div class="jiage">
                                                ￥ <%=p.getPackagetour().getPrice() %>
              </div>
              
              <!-- 团期 -->
              <div class="tuanqi">
                                                 出发时间：<%=p.getPackagetour().getPacktime() %>
              </div>
              
              <!-- 本团人数 -->
              <div class="renshu">
                                                 本团参考人数：<%=p.getPackagetour().getPeople() %>
              </div>
              
              <!-- 加入购物车时间 -->
              <div class="addtime">
                                                 订单时间：<%=p.getPacktime() %>
              </div>
            </div>
         </div>
    <%} %>
    
      <!-- 显示页码 -->
      <div class="pager">
         <%
           for(int i=1;i<=pager.getPageCount();i++)
           {%>
              <a href="<%=path%>/index/shoppingcart.jsp?pageNum=<%=i%>" class=<%=(i==pager.getPageNum()?"cur":"")%>><%=i%></a>
           
          <%}%>
                         共<%=pager.getPageCount() %>页   共<span id="HowManyData"><%=pager.getDataCount() %></span>记录
      </div>
      <a id="deleteChecked" href="javascript:void(0);">删除选中</a>

</div>
<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>